
import React, { PureComponent } from 'react'
import { Row, Col, Button, Input } from 'antd';
import { connect } from 'react-redux'
import PageBackHeader from "@common/PageBackHeader";
import WarehouseScheduleGoodsChoose from "@components/warehouse/WarehouseScheduleGoodsChoose";
import { withRouter } from 'react-router-dom'
import { creatScheduleApply } from '@sagas/warehouse/schedule'
import { WarehouseSelect } from '@components/warehouse/WarehouseSelect'
import { AllWarehouseSelect } from '@components/warehouse/AllWarehouseSelect'
import notify from "@utils/tip";
function mapStateToProps(state) {
    const { warehouseManagement } = state
    return {
        warehouseSelection: warehouseManagement.warehouseSelection,
    }
}

@connect(
    mapStateToProps
    , {
        creatScheduleApply,
    })
@withRouter
class ScheduleCreate extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            warehouseId: '',
            outWarehouseId: '',
            goodsItems: []
        }

        this.cancelFunc = this.cancelFunc.bind(this)
    }

    submitForm() {
        const { goodsItems, warehouseId, outWarehouseId } = this.state
        const { creatScheduleApply } = this.props
        const createParams = {
            id: warehouseId,
            outWarehouseId,
        }
        if (!goodsItems.length) {
            notify('请添加商品', 'error')
            return
        }
        createParams.details = goodsItems.map(o => {
            return {
                storage_key: o.storage_key,
                storage_type: 2,
                quantity: o.quantity,
            }
        })
        if (goodsItems.some(item => typeof (item.quantity) === 'undefined' || item.quantity === '')) {
            notify('请填写数量', 'error')
            return
        }

        creatScheduleApply(createParams, () => {
            notify('提交成功', 'success')
            this.cancelFunc()
        })

    }

    cancelFunc() {
        this.props.goBack ? this.props.goBack() : this.props.history.goBack()
    }

    handleIdChange(value) {
        this.setState({
            warehouseId: value
        })
    }

    handleOutIdChange(value) {
        this.setState({
            outWarehouseId: value
        })
    }

    onValueChange(value) {
        this.setState({
            goodsItems: value
        })
    }

    render() {
        const { warehouseId,outWarehouseId, goodsItems } = this.state
        return (
            <div className="bilin-web">
                <PageBackHeader title='新建调拨' />
                <div className="bilin-web-body with-footer">
                    <div className="warehouse-check-inventory-page">
                        <Row className="check-line">
                            <Col span={4}>
                                <span className='ft-clr-d'>调入仓库:</span>
                            </Col>
                            <Col span={18}>
                                <WarehouseSelect
                                    width='720px'
                                    value={warehouseId}
                                    onChange={this.handleIdChange.bind(this)}
                                />
                            </Col>
                        </Row>
                        <Row className="check-line">
                            <Col span={4}>
                                <span className='ft-clr-d'>调出仓库:</span>
                            </Col>
                            <Col span={18}>
                                <AllWarehouseSelect
                                    width='720px'
                                    value={outWarehouseId}
                                    onChange={this.handleOutIdChange.bind(this)}
                                />
                            </Col>
                        </Row>
                        <WarehouseScheduleGoodsChoose value={goodsItems || []} onChange={this.onValueChange.bind(this)} />
                    </div>
                </div>
                <div className="bilin-web-footer">
                    <Button type="primary" onClick={this.submitForm.bind(this)}>提交</Button>
                    <Button type="primary" ghost onClick={this.cancelFunc}>取消</Button>
                </div>
            </div>

        )
    }
}

export default ScheduleCreate